<script setup></script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Field Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Field (Label Above)</h3>
        <div class="flex flex-col space-y-4">
          <Field>
            <template #label>
              <Label>Username</Label>
            </template>
            <TextInput placeholder="Enter your username" />
          </Field>

          <Field>
            <template #label>
              <Label required>Email Address</Label>
            </template>
            <TextInput type="email" placeholder="example@domain.com" required />
            <template #message>
              <div>Please enter a valid email address</div>
            </template>
          </Field>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Field Label Positions</h3>
        <div class="flex flex-col space-y-4">
          <Field label-position="before">
            <template #label>
              <Label>First Name</Label>
            </template>
            <TextInput placeholder="Enter your first name" />
          </Field>

          <Field label-position="after">
            <template #label>
              <Label>Agree to Terms</Label>
            </template>
            <CheckBox />
          </Field>

          <Field>
            <template #label>
              <Label>Comments</Label>
            </template>
            <template #start>
              <span>💬</span>
            </template>
            <TextInput placeholder="Add your comments" />
            <template #end>
              <span>Optional</span>
            </template>
          </Field>
        </div>
      </div>
    </div>
  </div>
</template>
